<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container"></div>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script>
         // React.createElement()
        /*
            第一个参数是必填项  传入的是html标签  比如：ul li p
            第二个参数是选填  表示的是这个标签的属性 比如: className,
            第三个参数是选填  传入的是他的子节点 比如:li or 要显示的内容
        */

        // const p1 = React.createElement('p',{className:"p1"},"123456")
        const li1 = React.createElement('li',{className:"li1"},"one")
        const li2 = React.createElement('li',null,"twe")
        const li3 = React.createElement('li',{className:"li3"},"three")
        const ul = React.createElement('ul',{className:"ul"},li1,li2,li3)
        const domContainer = window.document.querySelector("#container")

        ReactDOM.render(ul,domContainer)
        console.log(domContainer);




    </script>
</body>
</html>